/// <reference path="references.scss" />

//
// Choice Styles (Variants etc.)
// ------------------------------------------------------

$choice-box-gap:            6px;
$choice-box-size:           46px;
$choice-box-size-lg:        64px;
$choice-box-size-sm:        36px;
$choice-box-size-xl:        96px;

.choice {
    margin-bottom: 1rem;
}

label.required,
.col-form-label.required,
.choice-label.required {
	//color: inherit;
	font-weight: $font-weight-medium;
	&:after { content: ' *' }
}

.choice-item {
    --choice-item-line-height: #{$line-height-base};
    --choice-item-size: max(1rem, 1em);

    display: inline-flex !important;
    align-items: center;
}

.choice-item-unavailable {
    color: $text-muted;
}

.choice-item-color,
.choice-item-img {
    display: inline-block;
    min-width: var(--choice-item-size);
    height: var(--choice-item-size);
    max-height: var(--choice-item-size);
    padding: 0;
    border-radius: 0.2em;
    border: var(--choice-item-border-width, 1px) solid rgba($black, 0.125);
    margin-inline-end: 0.5rem;
    margin-top: calc((var(--choice-item-line-height) * 1em - var(--choice-item-size)) * 0.5);
    align-self: flex-start;
    text-decoration: none !important;
    overflow: hidden;
}

.choice-item-img {
    > img {
        max-width: 100%;
        height: auto;
        display: inherit;
    }
}

.choice-description {
    color: $text-muted;
    font-size: $font-size-sm;
    margin-bottom: 0.5rem;
    > *:first-child { margin-top: 0; }
    > *:last-child { margin-bottom: 0; }
}

.choice-box-group {
    --choice-box-size: #{$choice-box-size};
    --choice-box-strike-color: rgba(0, 0, 0, 0.75);
	margin: 0;
	padding: 0;
	list-style-type: none;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: $choice-box-gap;
    
    @include clearfix();

    &.choice-box-group-sm {
        --choice-box-size: #{$choice-box-size-sm};
    }

    &.choice-box-group-lg {
        --choice-box-size: #{$choice-box-size-lg};
    }

    &.choice-box-group-xl {
        --choice-box-size: #{$choice-box-size-xl};
    }
}

.choice-box {
    position: relative;
    display: block;

    &.dark {
        --choice-box-strike-color: #fff;
    }
}

.choice-box-label {
    margin: 0;
}

.choice-box-content {
    position: relative;
	display: block;
    cursor: pointer;

    &:after {
        box-sizing: content-box;
        position: absolute;
        display: block;
        inset-inline-end: -6px;
        top: -6px;
        background-color: $warning;
        border-radius: 50%;
        border: 1px solid #fff;

        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        vertical-align: middle;

        @include fontawesome-font("\f00c", regular); // check
        color: #fff;
        font-size: 10px;

        opacity: 0;
        transform: scale(0);
        transition: all 0.1s ease-in;
    }
}

.choice-box-element {
    position: relative;
    display: inline-block;
    border: 1px solid rgba(0,0,0, .125);
    border-radius: var(--border-radius-md);
    background-color: #fff;

    height: var(--choice-box-size);
    line-height: var(--choice-box-size);
    min-width: var(--choice-box-size);
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    font-weight: $font-weight-medium;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-clip: padding-box;

    //&:hover { border-color: $gray-700; }

    .choice-box-text {
        padding: 0 0.4rem;
    }

    .choice-box.unavailable & {
        border: 1px dashed rgba(#000, .3);

        &:not(.choice-box-color) {
            opacity: .5;
        }

        &:after {
            position: absolute;
            content: '';
            background-color: var(--choice-box-strike-color);
            height: 1px;
            left: 0;
            right: 0;
            top: calc(50% - 1px);
            margin-inline: -8px;
            transform: rotate(-45deg);
        }
    }

    .choice-box.disabled & {
        opacity: .5;
    }
}

.choice-box-mediafile .choice-box-content {
    max-width: $choice-box-size-xl !important;

    .file-img {
        object-fit: contain;
        max-width: 100%
    }
}

.choice-box-control-native {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;

    &:focus-visible + .choice-box-label {
        .choice-box-element {
            box-shadow: $focus-ring-box-shadow !important;
        }
    }
}

.choice-box-control-native:checked + :is(.choice-box-label, .choice-box-content) {
    .choice-box-element {
        border-color: $gray-700;
        box-shadow: inset 0 0 0 2px rgba($white, 1);
    }

    &:after {
        opacity: 1;
        transform: scale(1);
    }
}
